<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D变换</title>
    <style type="text/css">
        .test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 0 0 50px 20px;
            box-sizing: content-box;
            background-color: #eeeeee;
            perspective: 100px;
        }
        .test div{
            width: 100px;
            height: 100px;
            background: #ddd;
            word-wrap: break-word;
        }
        .test .translate{
            transform:translate3d(10px,10px,10px)
        }
        .test .translateX{
            transform:translateX(20px)
        }
        .test .translateY{
            transform:translateY(20px)
        }
        div[class^="translateZ"]{
            background-color: red;
            position: absolute;
        }
        .test .translateZ1{
            transform: translateZ(-20px);
            opacity: 0.2;
        }
        .test .translateZ2{
            transform: translateZ(-40px);
            opacity: 0.4;
        }.test .translateZ3{
             transform: translateZ(-60px);
             opacity: 0.6;
         }
        .test .rotate1{
            transform: rotate3d(5,5,5,45deg);
        }
        .test .scale{
            transform:scale3d(0.8,0.8,0.8)
        }
        .test .scaleX{
            transform:scaleX(1.2)
        }
        .test .scaleY{
            transform:scaleY(1.2)
        }
        .test .scaleZ{
            transform:scaleZ(1.2)
        }
    </style>
</head>
<body>
<h3>移动：translate3d()</h3>
<div class="test">
    <div class="translate">
        字好像大了一些
    </div>
</div>
<div class="test">
    <div class="translateX">
        字大小一样
    </div>
</div>
<div class="test">
    <div class="translateY">
        字大小一样
    </div>
</div>
<h3>移动：指定透视</h3>
<div class="test">
    <div class="translateZ1">
        字大小变化
    </div>
    <div class="translateZ2">
        字大小变化
    </div>
    <div class="translateZ3">
        字大小变化
    </div>
</div>
<h3>旋转：rotate3d()</h3>
<div class="test">
    <div class="rotate1">
        字大小变化
    </div>
</div>
<h3>缩放：scale3d()</h3>
<div class="test">
    <div class="scale">
        字大小变化
    </div>
</div>
<div class="test">
    <div class="scaleX">
        字大小变化
    </div>
</div>
<div class="test">
    <div class="scaleY">
        字大小变化
    </div>
</div>
<div class="test">
    <div class="scaleZ">
        字大小变化
    </div>
</div>
</body>
</html>